<template>
  <el-select
      v-model="value"
      :placeholder="placeholder"
      :filterable="filterable"
      :clearable="clearable"
      :multiple="multiple"
  >
    <el-option v-for="item in userData" :value="item.value" :label="item.label" :key="item.key || item.value"/>
  </el-select>
</template>

<script setup lang="ts">
import {onMounted, ref, watch} from "vue";
import {getAllUserDropDownReq} from "@/api/admin/user.ts";

const props = defineProps({
  value: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: '请选择!'
  },
  clearable: {
    type: Boolean,
    default: true
  },
  filterable: {
    type: Boolean,
    default: true
  },
  multiple: {
    type: Boolean,
    default: false
  }
})

const value = ref(props.value)
watch(() => props.value, (val: string) => {
  value.value = val
})

const userData = ref<any>([])

const initUserData = async () => {
  const res: any = await getAllUserDropDownReq({});
  userData.value = res.data;
}

onMounted(async () => {
  initUserData().then();
})
</script>

<style scoped>

</style>